<template>
   <div class="record-bottom" style="width:100%">
      <table>
         <thead>
            <tr>
            <th>编号</th>
            <th>车牌号</th>
            <th>停车场入口</th>
            <th>停车时长</th>
            <th>入场时间</th>
            <th>出场时间</th>
            <th>应收金额</th>
            </tr>
         </thead>
         <tbody>
            <tr v-for="item in parkingRecord" :key="item.id">
            <td>{{ item.id }}</td>
            <td>{{ item.cnumber }}</td>
            <td>{{ item.pename }}</td>
            <td>{{ item.parkingtime }}</td>
            <td>{{ item.intime }}</td>
            <td>{{ item.outtime }}</td>
            <td style="color:#f59d43">{{ item.money }}</td>
            </tr>
         </tbody>
      </table>
   </div>
</template>

<script>
export default {
   data(){
      return{
         parkingRecord:[
            {
               id:1,
               cnumber:'京A88888',
               pename:'B2',
               parkingtime:'1h',
               intime:'2021.09.21 13:00',
               outtime:'2021.09.21 13:00',
               money:50
            },
            {
               id:2,
               cnumber:'鲁A88888',
               pename:'B2',
               parkingtime:'1h30min',
               intime:'2021.09.23 08:00',
               outtime:'2021.09.21 13:00',
               money:80
            },
            {
               id:3,
               cnumber:'鲁N66666',
               pename:'A2',
               parkingtime:'2h15min',
               intime:'2021.09.19 16:00',
               outtime:'2021.09.21 13:00',
               money:75
            },
         ]
      }
   },
}
</script>

<style lang="less" scoped>
table,thead,tbody{
      width: 100%;
   }
   .record-bottom thead tr{
      margin: 0 0 6px !important;
      color: rgb(106, 106, 106);
      th:nth-child(1){
         width: 8%;
      }
      th:nth-child(3){
         width: 10%;
      }
   }
   td,th{
      width: 20%;
   }
   .record-bottom tr{
      width: 100%;
      height: 40px;
      display: flex;
      justify-content: space-around;
      text-align: center;
      line-height: 40px;
      margin: 0 0 5px;
      border-radius: 4px;
      background-color: #fff;
      box-shadow: 0 1px 0 1px #c3c1cc;
      td:nth-child(1){
         width: 8% !important;
      }
      td:nth-child(3){
         width: 10% !important;
      }
   }
   th{
      font-size: 16px;
      font-weight: lighter;
   }
</style>